<template>
  <div>
    <NavBar left="完本"></NavBar>
    <div class="photo">
      <img
        src="https://qidian.qpic.cn/qidian_common/349573/11ae351bea938591d1b00a4f5649c966/0"
      />
    </div>
    <van-grid :border="false" :column-num="4">
      <van-grid-item>
        <i class="icon-qiandao"></i>
        <span>签到有礼</span>
      </van-grid-item>
      <van-grid-item>
        <i class="icon-newuser"></i>
        <span>新手礼包</span>
      </van-grid-item>
      <van-grid-item>
        <i class="icon-erymission"></i>
        <span>每日任务</span>
      </van-grid-item>
      <van-grid-item>
        <i class="icon-chongzeng"></i>
        <span>首充福利</span>
      </van-grid-item>
    </van-grid>
    <van-row class="shijian" type="flex" justify="space-between">
      <van-col class="bqzdmf" span="12">本期主打限免</van-col>
      <van-col span="6">
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ '0' + timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </van-col>
    </van-row>
    <van-grid :border="false" :column-num="4">
      <van-grid-item>
        <van-image
          class="fengmian"
          src="https://bookcover.yuewen.com/qdbimg/349573/c_20740568908488104/150"
        />
        <span>大佬的心头宝重生了</span>
        <span>夏夜梦戈</span>
      </van-grid-item>
      <van-grid-item>
        <van-image
          class="fengmian"
          src="https://bookcover.yuewen.com/qdbimg/349573/c_15153042805385804/150"
        />
        <span>不是风动是我心动</span>
        <span>漫随云卷...</span>
      </van-grid-item>
      <van-grid-item>
        <van-image
          class="fengmian"
          src="	https://bookcover.yuewen.com/qdbimg/349573/c_20992660601554504/150"
        />
        <span>影后她失忆后又热恋了</span>
        <span>pearl兰</span>
      </van-grid-item>
      <van-grid-item>
        <van-image
          class="fengmian"
          src="https://bookcover.yuewen.com/qdbimg/349573/c_21087099308964204/150"
        />
        <span>快穿之我又把男主给灭</span>
        <span>惑乱夭夭</span>
      </van-grid-item>
    </van-grid>
    <van-row class="module-header" type="flex" justify="space-between">
      <van-col class="rqmf" span="6">人气免费</van-col>
      <van-col class="gd" span="6">
        更多
        <van-icon name="arrow" />
      </van-col>
    </van-row>
    <van-card
      class="biaoti"
      desc="林苏只是一个刚入社会的小小职员一枚，平时也就喜欢宅在家里看看小说，追追剧。没想到莫名其妙的就穿越了，穿的还是自己正在追的那本书里。你说穿就穿吧，别人穿书不说穿个主角，起码穿个炮灰女配或者反派大佬什么的，她倒好，穿了个十八线恋爱脑的小透明。"
      title="快穿之她每天都想退出江湖"
      thumb="https://bookcover.yuewen.com/qdbimg/349573/c_20353388501272504/150"
    >
      <template #footer>
        <van-tag plain type="danger">轻小说</van-tag>
        <van-tag plain type="danger">连载中</van-tag>
        <van-tag plain type="danger">9.78万</van-tag>
      </template>
    </van-card>
    <van-card
      desc="前世，慕轻语错爱渣男，一枪打入心脏，却意外重生，回到了嫁给司景寒前夜。面对身染恶疾，双腿残废的丈夫，慕轻语心绪复杂，出言安慰：“你不行，我也不介意，以后我护着你。”司景寒咬牙切齿：“你说谁不行，恩？”慕轻语态度真诚，眼神里写满‘我理解’的字样。"
      title="全能影后飒翻天"
      thumb="https://bookcover.yuewen.com/qdbimg/349573/c_20921490208981204/150"
    >
      <template #footer>
        <van-tag plain type="danger">现代言情</van-tag>
        <van-tag plain type="danger">连载中</van-tag>
        <van-tag plain type="danger">10.73万</van-tag>
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
    }
  },
}
</script>

<style lang="scss" scoped>
.photo img {
  width: 100%;

  height: 100%;
}
.van-grid-item__content {
  height: auto;
}
.van-nav-bar .van-icon {
  color: #65c541;
}
.van-nav-bar__text {
  color: #1a1a1a;
  font-size: 1.1rem;
  padding-left: 0.6rem;
}
.icon-qiandao {
  display: block;
  width: 32px;
  height: 32px;
  background-image: url(https://qidian.gtimg.com/xs8m/icon/common/sprite@2x-fc3da0fdf8.png);
  background-size: 227px 179px;
  background-position: -72px -147px;
}
.icon-newuser {
  display: block;
  width: 32px;
  height: 32px;
  background-image: url(https://qidian.gtimg.com/xs8m/icon/common/sprite@2x-fc3da0fdf8.png);
  background-size: 227px 179px;
  background-position: 0 -147px;
}
.icon-erymission {
  display: block;
  width: 32px;
  height: 32px;
  background-image: url(https://qidian.gtimg.com/xs8m/icon/common/sprite@2x-fc3da0fdf8.png);
  background-size: 227px 179px;
  background-position: -36px -147px;
}
.icon-chongzeng {
  display: block;
  width: 32px;
  height: 32px;
  background-image: url(https://qidian.gtimg.com/xs8m/icon/common/sprite@2x-fc3da0fdf8.png);
  background-size: 227px 179px;
  background-position: -108px -147px;
}
.shijian {
  margin-top: 0.375rem;
  height: 1.75rem;
  border-top: 1rem solid transparent;
  padding: 0 1rem;
}
.bqzdmf {
  border-left: 2px solid #65c541;
  padding-left: 0.4rem;
  font-size: 1.1rem;
}
.colon {
  display: inline-block;
  //   margin: 0 4px;
  color: #d8d8d8;
}
.block {
  display: inline-block;
  width: 15px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #d8d8d8;
}
.fengmian img {
  display: block;
  height: 5.5rem;
  box-shadow: 0 4px 8px rgb(51 55 61 / 10%);
}
.module-header {
  height: 1.75rem;
  border-top: 1rem solid transparent;
  padding: 0 1rem;
  margin-top: 1rem;
}
.rqmf {
  border-left: 2px solid #65c541;
  padding-left: 0.4rem;
  font-size: 1.1rem;
}
.gd {
  padding-left: 2.5rem;
  color: #808080;
}
.van-card__title {
  font-size: 1rem;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 900;
}
.van-card__desc {
  line-height: 1.1875rem;
  height: 50px;
}
.van-card__footer > span:nth-child(1) {
  color: #65c541;
}
.van-card__footer > span:nth-child(2) {
  color: #5bddcd;
}
.van-card__footer > span:nth-child(3) {
  color: #add3fb;
}
.van-nav-bar__text {
  color: #1a1a1a;
  font-size: 1.1rem;
}
</style>
